<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<!--内部样式表,只有本文件能用-->
<style>


#div1 {

	/* 单一样式 */
	width:100%;
	height:400px;
  font-size: 50px;
  color: blue;

/*-----------背景:颜色,图片-------------*/
	background:#ccc;
  background:rgb(255,0,0);
  background:yellow;
  background:url(img/2.jpg);

	/* CSS注释：图片和背景色可以分开设置
  background-color:yellow;
	background-image:url(img/2.jpg);
	 默认状态下，背景会平铺
   */
background-color:yellow;


/*-----------背景图片重复-------------*/
	background-repeat:no-repeat;
  /*
		background-repeat:no-repeat;
		no-repeat 不重复
		repeat-x	水平平铺
		repeat-y	垂直平铺
    repeat 重复,默认值
	*/



/*-----------背景图片位置-------------*/
	/*background-position:50% 50%;*/
background-position:right 50%;
	/*
  位置默认是 0,0 ,当只设置了一个值时,另外一个值的默认值会为center
		background-position:200px 20px;
		背景定位：x  y
			100px 30px
			10%  20%
	left | center | right			top | center | bottom

     百分比x : 等同于x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。

	*/

/*-----------背景依附属性-------------*/

 background-attachment:scroll;
  /*
  background-attachment:fixed;
  fixed:代表固定,不滚动,类似依附到Window的样子
  scroll: 可滚动,类似依附到contentview
   */

	/* 复合样式, 把多种属性写到一起 */
	/*background:#ccc url(img/2.jpg) no-repeat -100px -20px fixed;*/

/*-----------边框-------------*/

/* dotted 不同操作系统会不一样
border-top: 20px solid black ; 
border-bottom: 20px dashed blue ;
border-left: 20px solid red ;
border-right: 20px solid green ;
*/

/* //更细致的层次结构
border-top-style: dotted ;
border-top-color: pink;
*/


}
</style>
</head>

<body>
<!-- HTML注释 -->
<div id="div1">
测试文字
</div>

</body>
</html>
